<template>
	<!-- 悬浮窗 -->
	<view id="suspension" :style="[get_style()]">
		<view class="suspension-wrap" @click="click()">
			<!-- {{ datas.borderRadius }} -->
			<!--  :style="{width:datas.size+'rpx',height:datas.size+'rpx'}"  -->
			<img class="suspension-logo" :src="datas.bgimg"/>
		</view>

	</view>
</template>
<script>
	export default {
		name: 'suspension',
		props: {
			datas: Object,
		},
		data() {
			return {
				Style: {},
				Location: {},
				touchNum: 0,
			}
		},
		created() {
			//	  this.Location=this.get_location();
			//this.Style=this.get_style();
		},
		methods: {
			click() {
				var self = this

				// // #ifdef APP-PLUS
				// var self = this;
				// //使用plus.cache.clear 清除应用中的缓存数据
				// plus.cache.clear(function() {
				// 	uni.showToast({
				// 		title: '清除成功!',
				// 		icon: 'none',
				// 		success() {
				// 			self.cacheSize = '0 B'
				// 		}
				// 	})
				// });
				// // #endif

				// console.log('lianjie:: ', this.datas);

				if (!this.datas.http.externalLink) {
					uni.showToast({
						title: '暂未开放',
						duration: 2000,
						icon: 'none'
					});
				} else {
					this.$emit("nav", {
						"type": "suspension",
						"data": this.datas
					});
				}

				// this.touchNum++
				// setTimeout(() => {
				// 	if (self.touchNum >= 3) {
				// 		console.log('三击')
				// 		if (!this.datas.http.externalLink) {
				// 			uni.showToast({
				// 				title: '未配置链接',
				// 				duration: 2000,
				// 				icon: 'none'
				// 			});
				// 		} else {

				// 			this.$emit("nav", {
				// 				"type": "suspension",
				// 				"data": this.datas
				// 			});
				// 		}
				// 	}
				// 	self.touchNum = 0
				// }, 400)

				// console.log("onClick",this.datas);
				// this.$emit("childEvent",{type:'click',name:'suspension',data:this.datas});
				// this.$emit("nav",{type:'link',url:this.datas.http.externalLink});
				// console.log('xuanfu: ', this.datas);

			},
			get_style() {
				let s = {};
				// for(let key in this.datas){
				//   s[key]=this.datas[key];
				// }
				s["top"] = this.datas.top;
				s["right"] = this.datas.right;
				s["width"] = this.datas.size + "rpx";
				s["height"] = this.datas.size + "rpx";
				s["borderRadius"] = this.datas.borderRadius + "%";
				s["backgroundColor"] = this.datas.bgcolor;
				// s["backgroundImage"]="url("+this.datas.bgimg+")";
				s["position"] = "fixed";
				console.log("suspension->get_style2", s)
				return s;
			},
			get_location() {
				let s = {};

				switch (parseInt(this.datas.location)) {
					case 1:
						s["top"] = "5rpx";
						s["left"] = "5rpx";
						break;
					case 2:
						s["top"] = "5rpx";
						s["right"] = "5rpx";
						break;
					case 3:
						s["left"] = "5rpx";
						s["bottom"] = "5rpx";
						break;
					case 4:
						s["right"] = "5rpx";
						s["bottom"] = "5rpx";
						break;
					default:
						s["top"] = "5rpx";
						s["right"] = "5rpx";
						break;
				}
				return s;

			}
		}
	}
</script>
<style lang="less" scoped>
	#suspension {
		width: 66rpx;
		height: 66rpx;
		position: fixed;

		background-repeat: no-repeat;
		background-size: 100%;
		// right: 2px;
		// top: 10%;
		z-index: 999;
		// border: solid 1px #ccc;

		box-sizing: border-box;

		.suspension-wrap {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 10rpx;
			z-index: 1001;
			background-size: 100%;

			.suspension-logo {
				width: 56rpx;
				height: 56rpx;
				padding: 10rpx;
				border: 1rpx solid black;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.6);
			}
		}
	}
</style>